<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿照QQ好友列表</title>
    <style>
        body {
            font-family: "微软雅黑";
        }

        table {
            border: #0099FF 1px solid;
            width: 100px;
            margin: 15px 10px;
            border-collapse: collapse;

        }

        tr td {
            border: 1px solid #0066FF;
            background: gainsboro;
            text-align: center;
            padding: 5px 0;
        }

        table td div {
            background: #ffff99;
            display: none;
        }

        table td a:link, table td a:visited {
            color: #00ffFF;
            text-decoration: none;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">家人</a> <br>
            <!--
                display = block  块级元素显示
                display = none  隐藏
            -->
            <div>
                爸爸 <br>
                妈妈 <br>
                妹妹 <br>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">同学</a> <br>
            <div>
                聂茹凤 <br>
                谭鑫宇<br>
                李兆康<br>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">朋友</a> <br>
            <div>
                马云 <br>
                马化腾 <br>
                马冬梅 <br>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="javascript:void(0)" onclick="openDiv(this)">同事</a>
            <div>
                张纪豪 <br>
                李国军<br>
                庆贺 <br>
            </div>
        </td>
    </tr>
</table>
</body>
<script>
    function openDiv(obj) {
        // obj是a标签 需要获取a标签的父元素
        var parentObj = obj.parentNode;
        // 获取a标签的兄弟元素
        var divObj = parentObj.getElementsByTagName("div")[0] //当前元素

        // 获取所有DIv
        var allObj = document.getElementsByTagName("div")


        //判断当前元素如果时打开的，则关闭，如果是关闭的，则打开
        if (divObj.style.display == "block") {//打开
            divObj.style.display = "none" //隐藏

        } else { //隐藏
            // 把所有的隐藏
            for (var i = 0; i < allObj.length; i++) {
                allObj[i].style.display = "none"
            }
            divObj.style.display = "block" //把当前的打开
        }
    }
</script>
</html>